{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h4><i class="fas fa-spell-check"></i> 语法纠错</h4>
                <small>检查英语句子的语法错误，获得详细解释</small>
            </div>
            <div class="card-body">
                <form id="grammar-form">
                    <div class="mb-3">
                        <label for="text-input" class="form-label">输入要检查的英语句子：</label>
                        <textarea class="form-control" id="text-input" rows="4" placeholder="例如：She go to school everyday."></textarea>
                    </div>
                    <button type="submit" class="btn btn-warning" id="check-btn">
                        <i class="fas fa-check-circle"></i> 检查语法
                    </button>
                </form>
                
                <div id="result-container" class="mt-4" style="display: none;">
                    <h5>检查结果：</h5>
                    <div id="correction-result" class="alert alert-info" style="white-space: pre-line;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const grammarForm = document.getElementById('grammar-form');
    const textInput = document.getElementById('text-input');
    const checkBtn = document.getElementById('check-btn');
    const resultContainer = document.getElementById('result-container');
    const correctionResult = document.getElementById('correction-result');
    
    grammarForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const text = textInput.value.trim();
        if (!text) {
            alert('请输入要检查的文本');
            return;
        }
        
        checkBtn.disabled = true;
        checkBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 检查中...';
        
        try {
            const response = await fetch('/grammar', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text: text })
            });
            
            const data = await response.json();
            
            if (data.error) {
                correctionResult.className = 'alert alert-danger';
                correctionResult.textContent = data.error;
            } else {
                correctionResult.className = 'alert alert-info';
                correctionResult.textContent = data.corrected;
            }
            
            resultContainer.style.display = 'block';
        } catch (error) {
            correctionResult.className = 'alert alert-danger';
            correctionResult.textContent = '检查过程中出现错误，请重试。';
            resultContainer.style.display = 'block';
        } finally {
            checkBtn.disabled = false;
            checkBtn.innerHTML = '<i class="fas fa-check-circle"></i> 检查语法';
        }
    });
});
</script>
{% endblock %}